<template>
  <div class="box">
    <span class="cpu-rate">主机正常/异常数</span>
    <div class="text">
      <span style="color: #4eb6c3;float: left;">主机数量: <span>{{hostNum}}</span></span>
      <span
        class="status"
        style="float: right"
      >
        <span><i></i> 正常</span><span class="baddata"><i style="background: #d00128"></i> 异常</span>
      </span>
    </div>
    <div id="pieChart">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hostNum: 6,
      hostOkNum: 5,
      hostBadNum: 1,
      myCharts: null
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawPie();
      window.addEventListener("resize", () => { this.myCharts.resize(); });

    })
  },
  methods: {
    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      let pieChart = this.$echarts.init(document.getElementById('pieChart'))
      this.myCharts = pieChart;
      // 绘制图表
      pieChart.setOption({
        title: {
          text: '',//主机正常异常比率
          subtext: '',//'主机数量' + this.hostNum
          x: 'center'
        },
        color: ['#01b1a2', '#d00128'],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: false,
          orient: 'vertical',
          left: 'left',
          data: ['正常', '异常'] // data: [`正常${this.hostOkNum}`, `异常${this.hostBadNum}`]
        },
        series: [
          {
            name: '主机正常异常比率',
            type: 'pie',
            // selectedMode: 'single', //单选
            radius: '50%',
            center: ['48%', '60%'],
            data: [
              { value: this.hostOkNum, name: '正常' },
              { value: this.hostBadNum, name: '异常', selected: true },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },


          }
        ]
      });
    }
  }
}</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../style/mixin.scss";

.box {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50%;
  font-weight: 700 !important;
  /*border: 10px solid transparent;*/
  /*border-image: url('../assets/images/11.png') 25 25 round;*/
  background: url("../assets/images/bg111.png") no-repeat center;
  background-size: 100% 100%;

  .cpu-rate {
    position: absolute;
    top: 20px;
    left: 25px;
    font-size: 16px;
    color: white;
    color: #fff;
  }

  .text {
    position: absolute;
    top: 55px;
    left: 12px;
    width: 100%;
    padding-left: 10px;
    span {
      font-size: 24px;
      color: white;
      font-weight: 700;
    }

    .status {
      padding-right: 40px;
      span {
        font-size: 16px;
        font-weight: 700;
      }
      i {
        display: inline-block;
        @include wh(12px, 12px);
        background: #01b1a2;
        border-radius: 2px;
        margin-right: 2px;
      }

      .baddata {
        padding-left: 10px;
        font-weight: 700;
      }
    }
  }

  #pieChart {
    width: 100%;
    height: 100%;
    padding-top: 35px;
    div {
      width: 100% !important;
      height: 100% !important;
    }
  }
}

/* transform:rotate(-45deg);
   -ms-transform:rotate(-45deg);
   -moz-transform:rotate(-45deg);
   -webkit-transform:rotate(-45deg);*/
</style>
